<template>
  <div class="div" :style="he">
    <div class="holder" :class="color"></div>
    <div class="top">
      <h2>实习</h2>
      <div>
        <span class="text">学生版</span>
        <!-- 搜索组件 -->
        <span class="img" @click="ck"></span>
      </div>
    </div>
    <!-- 综合 -->
    <div :class="cl" :style="fixed">
      <div>
        <span>综合</span><span>web前端</span><span>Java</span>
      </div>
      <span class="add">+</span>
    </div>
    <div class="bottom"  :style="sy">
      <div class="text">
        <span>推荐</span>
        <span>附近</span>
        <span>最新</span>
      </div>
      <div class="btn">
        <span @click="wei">成都</span>
        <span @click="shai">筛选</span>
      </div>
    </div>
    <!-- <Search  :flg="flg" v-show="flg" @xiugai="xiugai"></Search> -->
    <router-view/>
  </div>
</template>

<script>
// import Search from '@/components/Search.vue' 
export default {
  name: 'HelloWorld',
  components: {
    // Search
  },
  props:['scroll',],
  data(){
    return {
      cl:"middle",
      sy:null,
      fixed:null,
      he:null,
      flg:false,
      color:'',
    }
  },
  watch:{
    scroll:'windowScroll'
  },
  methods:{
    windowScroll(){
      let scrollTop = this.scroll
      // console.log(scrollTop);
      if(scrollTop>32){
        this.cl = "active"
      }else{
        this.cl = "middle"
      }
      if(scrollTop>56.5){
        this.sy = {position:"fixed",top:"69px",left:"19px"}
        this.he = {height:"110vh"}
        // console.log(111);
      }else{
        // this.cl =""
        this.sy = null
        this.he =null
      }
      if(scrollTop>63){
        this.fixed = {position:"fixed",top:"0px",left:"0px"}
      }else{
        this.fixed =null
      }
    },
    ck(){
      this.$store.commit('judge')
      // this.flg = !this.flg
      this.$router.push('/search')
    },
    shai(){
      this.$store.commit('judge')
      this.$router.push('/screen')
    },
    wei(){
      this.$store.commit('judge')
      this.$router.push('/location')
    },
  },
  mounted(){
    this.color = this.$store.getters.color
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.div{
  width: 100vw;
  // height: 30vh;
  // z-index: -99;
  overflow: hidden;
  // position: fixed;
  .holder{
    width: 100%;
    height: 18vw;
    // background: #36C1BB;
    position: fixed;
    z-index: -1;
  }
  // top
  .top {
    width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    div{
      display: flex;
      .text {
        display: inline-block;
        border: 1px solid #fff;
        border-radius: 3px;
        font-size: 13px;
        padding: 3px 20px 3px 6px;
        white-space: nowrap;
        position: relative;
        margin-right: 15px;
      }
      .text::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-bottom: 2px solid rgb(255, 255, 255);
        border-right: 2px solid rgb(255, 255, 255);
        transform: rotate(-45deg);
        position: absolute;
        top: 8px;
        left: 48px;
      }
      .img {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        background: url($URL+"search.svg");
        background-size: 100%;
        // margin-left: 15px;
      }
    }
  }
  // middle
  .middle {
    width: 100%;
    margin: 10px auto;
    font-weight: bold;
    color: #797979;
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    div{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    span:first-child{
      position: relative;
      color: #000;
    }
    span:first-child::after{
      content: '';
      display: inline-block;
      width: 17px;
      height: 3px;
      position: absolute;
      top: 26px;
      left: 8px;
      background: #36C1BB;
    }
    .add{
      flex: 1;
      text-align: right;
    }
  }
  // active middle 
  .active {
    width: 100%;
    margin: 10px auto;
    padding: 10px 20px;
    // position: fixed;
    // font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    display: flex;
    
    justify-content: space-between;
    div{
      flex: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        opacity: .5;
      }
      span:first-child{
        opacity: 1;
        position: relative;
        // color: #000;
      }
    }
    .add{
      flex: 1;
      text-align: right;
    }
  }
  // bottom
  .bottom {
    margin: 0 auto;
    width: 90%;
    padding: 10px 0px;
    display: flex;
    z-index: 99;
    justify-content: space-between;
    // border-bottom: .1px solid #fbfbfb;
    box-shadow: 0px 2px 0px -1px #e7e7e7;
    // margin-bottom: 18px;
    div{
      display: flex;
    }
    .text {
      flex: 1;
      justify-content: space-between;
      font-size: 14px;
      color: #797979;
      span:first-child{
        color: #000;
      }
    }
    .btn {
      flex: 2;
      justify-content: end;
      span{
        display: inline-block;
        width: 60px;
        border-radius: 4px;
        color: #797979;
        background: #F5F5F5;
        text-align: center;
        padding: 1vw;
      }
      span::after{
        content: '';
        display: inline-block;
        width: 0px;
        height: 0px;
        // overflow: hidden;
        border-left: 5px solid transparent;
        border-top: 5px solid transparent;
        border-bottom: 0px solid transparent;
        border-right: 5px solid #797979;
        // background: #797979;
      }
      span:first-child {
        margin-right: 8px;
      }
    }
  }
}
</style>
